<template>
	<view style="height: 100%">
		<!-- pages/apartment/apartment.wxml -->

		<view id="usual">
			<van-button type="info" color="#3ba757" plain size="small" icon="star-o" @click="addUsual">常用</van-button>
		</view>

		<van-tree-select height="500" :items="items" :main-active-index="mainActiveIndex" :active-id="activeId"
			@click-nav="onClickNav" @click-item="onClickItem" />

		<navigator url="../apartment_connect/apartment_connect">
			<van-button type="info" color="#3ba757" size="large">开门</van-button>
		</navigator>
	</view>
</template>

<script>
	import Page from '../../common/page';
	import vanTreeSelect from '../../wxcomponents/vant/tree-select/index'
	import vanButton from '../../wxcomponents/vant/button/index'
	import vanIcon from '../../wxcomponents/vant/icon/index';
	import vanSidebar from '../../wxcomponents/vant/sidebar/index';
	import vanSidebarItem from '../../wxcomponents/vant/sidebar-item/index';
	import mainActiveIndex from '../../wxcomponents/vant/tree-select/index.js';
	import activeId from '../../wxcomponents/vant/tree-select/index.js';
	var apartmentData;
	var usualApartment = [];
	export default {
		components: {
			vanTreeSelect,
			vanButton,
			vanIcon,
			vanSidebar,
			vanSidebarItem
		},
		// 监听页面初次渲染完成
		data() {
			return {
				battery: '80',
				items: [{
						text: '我的常用',
						children: []
					},
					// A区id第一位为1
					{
						text: '1A',
						children: [{
								text: '101',
								id: '1101'
							},
							{
								text: '102',
								id: '1102'
							},
							{
								text: '103',
								id: '1103'
							},
							{
								text: '104',
								id: '1104'
							},
							{
								text: '105',
								id: '1105'
							},
							{
								text: '106',
								id: '1107'
							},
							{
								text: '108',
								id: '1108'
							},
							{
								text: '109',
								id: '1109'
							},
							{
								text: '110',
								id: '1110'
							}
						]
					},
					// B区id第一位为2
					{
						text: '1B',
						children: [{
								text: '101',
								id: '2101'
							},
							{
								text: '102',
								id: '2102'
							},
							{
								text: '103',
								id: '2103'
							},
							{
								text: '104',
								id: '2104'
							},
							{
								text: '105',
								id: '2105'
							}
						]
					},
					// C区id第一位为3
					{
						text: '1C',
						children: [{
								text: '101',
								id: '3101'
							},
							{
								text: '102',
								id: '3102'
							},
							{
								text: '103',
								id: '3103'
							},
							{
								text: '104',
								id: '3104'
							},
							{
								text: '105',
								id: '3105'
							}
						]
					}
				],
				// 右侧选项栏中被选中的元素id--->items[mainActiveIndex].children[activeId].id
				activeId: null,
				// 左侧选项卡中被选中的元素的下标--->items[]
				mainActiveIndex: 0
			};
		},
		onReady() {
			this.getDataStroage();
			// 数组赋值(将数组从本地缓存中读取数据并渲染到页面)
			if (apartmentData.length > 0) {
				// console.log(apartmentData);
				this.items[0].children.push({
					text: apartmentData[0].text,
					id: apartmentData[0].id
				});
				this.setData({
					items: this.items
				});
			}
		},
		methods: {
			onClickNav({
				detail = {}
			}) {
				this.mainActiveIndex = detail.index;
				// console.log(this.mainActiveIndex);
			},

			onClickItem({
				detail = {}
			}) {
				if (this.activeId !== detail.id) {
					this.activeId = detail.id;
					// this.activeClass = 'highlighted';
					// console.log(this.activeId);
				}
				// if (this.activeId === detail.id) {
				// } else {
				//     const conActiveId = detail.id;
				// }
				// this.activeId = conActiveId;
			},

			// 点击设为常用后将对应的宿舍添加到我的常用数组中
			addUsual() {
				// 首先要获取选中的id
				let activeId = this.activeId;
				let mainActiveIndex = this.mainActiveIndex;
				// 判断是否已经有常用宿舍
				if (this.items[0].children.length === 0) {
					//没有常用宿舍了
					if (this.activeId === null) {
						//判断是否误触添加常用
						uni.showToast({
							title: '请选择宿舍',
							duration: 2000
						});
						// 将数组清空
						this.items[0].children = [];
					} else {
						// 使用findIndex(),根据选中的id获取对应id对象所有数据
						let index = this.items[mainActiveIndex].children.findIndex(function(event) {
							return event.id === activeId;
						});
						let addObj = this.items[mainActiveIndex].children[index];
						// 用push()方法将对象添加到数组中
						this.items[0] = this.items[0].children.push(addObj);
						// console.log(this.data.items[0].children);
						// this.saveDataStorage();
						uni.showToast({
							title: '添加常用成功',
							duration: 2000
						});
					}
				} else {
					//已经有常用宿舍了
					if (apartmentData[0].id === activeId) {
						//判断是否点击的是已经添加过的常用宿舍
						uni.showToast({
							title: '已添加',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '只能有一个常用宿舍',
							duration: 2000
						});
					}
				}
			},

			// Storage缓存,将当前页面数据缓存到手机上，然后在其他页面读取缓存使用数据
			saveDataStorage() {
				let apartmentData = this.items[0].children;
				// 同步写入缓存
				uni.setStorageSync('apartment', apartmentData);
			},

			// 读取本地缓存的数据
			getDataStroage() {
				// 同步读取本地缓存数据
				apartmentData = uni.getStorageSync('apartment');
			},
		}
	};
</script>
<style>
	#manage {
		float: right;
	}

	#usual {
		float: right;
	}

	.highlighted {
		color: #3ba757;
	}
</style>